<template>
    <div class="comment-wrapper">
        <n-space size="small">
            <n-tag v-if="props.comment.commentatorId === props.comment.questionerId" :bordered="false" size="small"
                   type="info">提问者
            </n-tag>
            <n-text style="font-weight: bold;" type="primary">{{ comment.commentatorName }}</n-text>
            <span v-if="comment.replyTo">
                <span style="color: #767C82; font-weight: normal; margin: 0 0.3vw;">回复</span> {{ comment.replyTo }}
            </span>:
            <n-text>{{ comment.content }}</n-text>
        </n-space>
        <div class="second-line">
            <n-button v-if="isLike" text @click="toggleLike">
                <template #icon>
                    <n-icon color="#00965e" size="16">
                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink">
                            <path
                                d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7c0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311h-.3v428h472.3c9.2 0 18.2-1.8 26.5-5.4c47.6-20.3 78.3-66.8 78.3-118.4c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c-.2-12.6-2-25.1-5.6-37.1zM112 528v364c0 17.7 14.3 32 32 32h65V496h-65c-17.7 0-32 14.3-32 32z"
                                fill="currentColor"></path>
                        </svg>
                    </n-icon>
                </template>
            </n-button>
            <n-button v-else text @click="toggleLike(comment.id)">
                <template #icon>
                    <n-icon size="16">
                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink">
                            <path
                                d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7c0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4c47.6-20.3 78.3-66.8 78.3-118.4c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7c9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
                                fill="currentColor"></path>
                        </svg>
                    </n-icon>
                </template>
            </n-button>
            <n-text depth="3">{{ comment.likeCount }}</n-text>
            <span class="split-dot"></span>
            <n-text class="comment-button" depth="3" @click="handleReply">
                回复
            </n-text>
            <span class="split-dot"></span>
            <n-text depth="3">{{ $dayjs(comment.createTime).format('M 月 DD 日 HH:mm:ss') }}</n-text>
        </div>
        <div v-if="showTextarea" class="third-line">
            <n-space :vertical="true" size="small">
                <span class="reply-to">回复 <n-text type="primary"> {{ comment.commentatorName }}</n-text></span>
                <n-input
                    v-model:value="secondaryComment.content"
                    :autosize="true"
                    placeholder="撰写评论 ..."
                    type="textarea"
                />
                <n-button style="float:right;" type="primary" @click="handleSubmitSecondaryComment">提交评论</n-button>
            </n-space>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { insertComment } from '../api/comment'
import { useMessage } from 'naive-ui'
import { deleteVoteOfComment, getUserVoteOfComment, insertVoteOfComment } from '../api/vote'
import { useUserStore } from '../store/user'

const userStore = useUserStore()
const props = defineProps({
    comment: {
        id: Number,
        commentatorId: Number,
        questionerId: Number,
        commentatorName: String,
        content: String,
        createTime: Date,
        likeCount: Number,
        answerId: Number,
        replyTo: String,
    },
})
const emit = defineEmits(['update-comment-list'])
const route = useRoute()
const message = useMessage()

const showTextarea = ref(false)
const secondaryComment = ref({
    content: '',
    questionId: route.params.id,
    replyTo: props.comment.commentatorId,
    answerId: props.comment.answerId,
    rootCommentId: props.comment.id,
})
const handleReply = () => {
    showTextarea.value = !showTextarea.value
}
const handleSubmitSecondaryComment = () => {
    insertComment(secondaryComment.value, props.comment.answerId).then(res => {
        if (res.code === '201') {
            message.success('提交成功！')
            secondaryComment.value.content = ''
            emit('update-comment-list', props.comment.answerId)
            showTextarea.value = false
        } else {
            message.error('出问题啦！')
        }
    })
}

const isLike = ref(false)
const voteId = ref(null)
const vote = ref({
    entityType: 2,
    entityId: props.comment.id,
    voter: null,
    attitude: 'neutral',
})
const toggleLike = commentId => {
    if (userStore.token === '') {
        message.warning('你还没有登录，请登录后再试！')
        return
    }
    isLike.value = !isLike.value
    vote.value.entityId = commentId
    if (isLike.value) {
        vote.value.attitude = 'approval'
        insertVoteOfComment(props.comment.id, vote.value).then(res => {
            if (res.code === '201') {
                props.comment.likeCount++
                voteId.value = res.data
            }
        })
    } else {
        deleteVoteOfComment(props.comment.id, voteId.value).then(res => {
            if (res.code === '204') {
                isLike.value = false
                props.comment.likeCount--
            } else {
                message.error('出问题啦！')
            }
        })
    }
}
onMounted(() => {
        if (userStore.token !== '') {
            getUserVoteOfComment(props.comment.id).then(res => {
                if (res.data === null) return
                voteId.value = res.data.id
                isLike.value = res.data.attitude === 'approval'
            })
        }
    },
)
</script>

<style scoped>
.comment-wrapper {
    font-size: 15px;
}

.second-line {
    display: flex;
    align-items: center;
    gap: 0.4vw;
    margin-top: 0.4vh;
}

.split-dot {
    background-color: #ced4da;
    height: 0.3vw;
    width: 0.3vw;
    border-radius: 50%;
}

.comment-button {
    cursor: pointer;
}

.comment-button:hover {
    color: #3A3D40;
}

.reply-to {
    color: #767C82;
}
</style>
